<template>
    <div>
        <el-dialog
            :title="info.isAdd ? '会员添加' : '会员编辑'"
            :visible.sync="info.isshow"
            @closed="closed"
        >
            <div>form:{{ form }}</div>
            <el-form :model="form">
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="edit">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqcateadd, reqmemberinfo, reqmemberedit } from "../../../http/api"
import { errorAlert, successAlert } from "../../../utils/alert"
import path from "path";

export default {
    props: ["info"],
    data() {
        return {
            form: {
                uid: "",
                nickname: "",
                phone: "",
                password: "",
                status: 1,
            },
            formLabelWidth: "120px",
            imgUrl: "",
        }
    },
    computed: {
        ...mapGetters({
        }),
    },
    mounted() {
        this.reqVip()
    },
    methods: {
        ...mapActions({
            reqVip: "vip/reqVip"
        }),

        checkDate() {
            return new Promise((resolve, rejeck) => {
                //验证区域
                let myPhone = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                if (!myPhone.test(this.form.phone)) {
                    errorAlert("手机号格式错误")
                    return;
                }
                if(this.form.nickname===""){
                    errorAlert("昵称不能为空!")
                    return;
                }
                resolve();
            })
        },

        //选了文件
        changeFile(e) {
            let file = e.target.files[0]
            //判断它的后缀名
            let imgArr = [".jpg", ".jpeg", ".png", ".gif"]
            let extname = path.extname(file.name)
            if (!imgArr.includes(extname)) {
                errorAlert("请上传正确的图片")
                return;
            }
            //判断大小
            if (file.size > 2 * 1024 * 1024) {
                errorAlert("最大支持2M")
                return;
            }
            //根据文件生成一个地址
            this.imgUrl = URL.createObjectURL(file)
            //将文件赋值给form.img
            this.form.img = file
        },
        //清空表单的数据
        empty() {
            this.form = {
                uid: "",
                nickname: "",
                phone: "",
                password: "",
                status: 1,
            }
        },
        //点了取消
        cancel() {
            this.info.isshow = false
        },
        //编辑渲染页面
        getOne(id) {
            console.log(id);
            reqmemberinfo({ uid: id }).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    // 赋值给form
                    this.form.uid = id
                    this.form = res.data.list;
                    //清空密码框
                    this.form.password = ""
                }
            })
        },
        //修改
        edit() {
            this.checkDate().then(() => {
                reqmemberedit(this.form).then(res => {
                    if (res.data.code == 200) {
                        //成功弹窗
                        successAlert(res.data.msg);
                        //清除数据表单
                        this.empty();
                        //关闭窗口
                        this.info.isshow = false
                        //刷新页面
                        this.reqVip();
                    }
                })
            })
        },
        //弹框关闭
        closed() {
            if (this.info.isAdd == false) {
                this.empty()
            }
        }
    },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.my-upload {
    width: 100px;
    height: 100px;
    border: 1px dotted @primary;
    border-radius: 3%;
    position: relative;
    .plus {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 100px;
    }
    .ipt {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        opacity: 0;
        z-index: 10;
        cursor: pointer;
    }
    img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
    }
}
</style>